<template>
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:20px;height: 95%;overflow-y: hidden">
    <template slot="footer">
      <a-button key="back" @click="handleCancel">关闭</a-button>
    </template>
    <!-- table区域-begin -->
    <div style="width:100%;">
      <section ref="print" id="reportPrint">
        <a-table
          bordered
          ref="table"
          size="small"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          :loading="loading"
          @change="handleTableChange">
            <span slot="numberCustomRender" slot-scope="text, record">
              <a @click="myHandleDetail(record)">{{record.number}}</a>
            </span>
        </a-table>
        <a-row :gutter="24" style="margin-top: 8px;text-align:right;">
          <a-col :md="24" :sm="24">
            <a-pagination @change="paginationChange" @showSizeChange="paginationShowSizeChange"
              size="small"
              show-size-changer
              :showQuickJumper="true"
              :page-size="ipagination.pageSize"
              :page-size-options="ipagination.pageSizeOptions"
              :total="ipagination.total"
              :show-total="(total, range) => `共 ${total-parseInt(total/ipagination.pageSize)-1} 条`">
              <template slot="buildOptionText" slot-scope="props">
                <span>{{ props.value-1 }}条/页</span>
              </template>
            </a-pagination>
          </a-col>
        </a-row>
      </section>
    </div>
    <!-- table区域-end -->
    <bill-detail ref="billDetailModal"></bill-detail>
    <financial-detail ref="financialDetailModal"></financial-detail>
  </a-modal>
</template>

<script>
  import BillDetail from './BillDetail'
  import FinancialDetail from './FinancialDetail'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import {findBillDetailByNumber, findFinancialDetailByNumber} from '@/api/api'
  export default {
    name: 'CommisionBill',
    mixins:[JeecgListMixin],
    components: {
      BillDetail,
      FinancialDetail
    },
    data () {
      return {
        title: '',
        visible: false,
        confirmLoading: false,
        disableSubmit: false,
        // 查询条件
        queryParam: {
          salesMan: '',
          beginTime: '',
          endTime: '',
        },
        ipagination:{
          pageSize: 11,
          pageSizeOptions: ['11', '21', '31', '101', '201']
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 },
        },
        // 表头
        columns: [
          {
            title: '#', dataIndex: 'rowIndex', width:40, align:"center",
            customRender:function (t,r,index) {
              return (t !== '合计') ? (parseInt(index) + 1) : t
            }
          },
          {
            title: '单据编号', dataIndex: 'number', width: 150,
            scopedSlots: { customRender: 'numberCustomRender' },
          },
          {title: '单据类型', dataIndex: 'billType', width: 150},
          {title: '收款金额', dataIndex: 'changeAmount', width: 150},
          {title: '收款金额（均摊）', dataIndex: 'shareChangeAmount', width: 150},
        ],
        url: {
          list: "/api/plugin/commision/commision/getSaleBill"
        }
      }
    },
    created() {
    },
    methods: {
      show(record, beginTime, endTime) {
        this.visible = true
        this.queryParam.salesMan = record.id
        this.queryParam.beginTime = beginTime
        this.queryParam.endTime = endTime
        this.loadData()
      },
      close () {
        this.$emit('close');
        this.disableSubmit = false;
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
      myHandleDetail(record) {
        let that = this
        if(record.fromType === 'bill') {
          findBillDetailByNumber({ number: record.number }).then((res) => {
            if (res && res.code === 200) {
              that.$refs.billDetailModal.show(res.data, record.billType);
              that.$refs.billDetailModal.title = "详情";
            }
          })
        } else if(record.fromType === 'financial') {
          findFinancialDetailByNumber({ billNo: record.number }).then((res) => {
            if (res && res.code === 200) {
              that.$refs.financialDetailModal.show(res.data, record.billType);
              that.$refs.financialDetailModal.title="详情";
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  @import '~@assets/less/common.less'
</style>